<template>
	<!-- 选项列表 -->
	<!-- <view class="menu-box" :style="isCard?'padding-top:190rpx;position: relative;bottom:165rpx':'position: relative;'"> -->
	<view class="menu-box" :style="isCard?'':'border-radius: 20rpx 20rpx 0rpx 0rpx;'">
		<zHeadLab title='学习服务' size='font-size:28rpx'></zHeadLab>
		<!-- grad -->
		<view class="grad-box">
			<uv-row justify="space-between" gutter="10" >
				<uv-col span="3" @click="getopen(1)">
					<view class="grad-list">
						<image class="icon" src="@/static/image/icon/tkjl-icon.png"></image>
					</view>
				</uv-col>
				<uv-col span="3" @click="getopen(1)">
					<view class="grad-list">
						<image class="icon" src="@/static/image/icon/tsjl-icon.png"></image>
					</view>
				</uv-col>
				<uv-col span="3" @click="getopen(1)">
					<view class="grad-list">
						<image class="icon" src="@/static/image/icon/wdsc-icon.png"></image>
					</view>
				</uv-col>
				<uv-col span="3">
				</uv-col>
			</uv-row>
		</view>
		<view class="gap"></view>
		<zHeadLab title='贴心服务' size='font-size:28rpx'></zHeadLab>
		<!-- grad -->
		<view class="grad-box">
			<uv-row justify="space-between" gutter="10" >
				<uv-col span="3" @click="getopen(1)">
					<view class="grad-list">
						<image class="icon" src="@/static/image/icon/wddd-icon.png"></image>
					</view>
				</uv-col>
				<uv-col span="3" @click="getopen(1)">
					<view class="grad-list">
						<image class="icon" src="@/static/image/icon/wdqy-icon.png"></image>
					</view>
				</uv-col>
				<!-- v-if="!isCrown" -->
				<uv-col span="3" @click="getopen('xj')" >
					<view class="grad-list">
						<image class="icon" src="@/static/image/icon/wdxj.png"></image>
					</view>
				</uv-col>
				<uv-col span="3" @click="getopen(1)">
					<view class="grad-list">
						<image class="icon" src="@/static/image/icon/xxtz-icon.png"></image>
					</view>
				</uv-col>
				<uv-col span="3" @click="getopen('xk')">
					<view class="grad-list">
						<image class="icon" src="@/static/image/icon/xkzx.png"></image>
					</view>
				</uv-col>
				<uv-col span="3" @click="getopen(1)">
					<view class="grad-list">
						<image class="icon" src="@/static/image/icon/hdzx-icon.png"></image>
					</view>
				</uv-col>
				<uv-col span="3" @click="getopen(1)">
					<view class="grad-list">
						<image class="icon" src="@/static/image/icon/dzsk-icon.png"></image>
					</view>
				</uv-col>
				<uv-col span="3" @click="getopen(1)">
					<view class="grad-list">
						<image class="icon" src="@/static/image/icon/zyjl-icon.png"></image>
					</view>
				</uv-col>
				<uv-col span="3" @click="getopen(1)">
					<view class="grad-list">
						<image class="icon" src="@/static/image/icon/wdzy-icon.png"></image>
					</view>
				</uv-col>
			</uv-row>
		</view>
		<view class="gap"></view>
		<block v-if="cardList&&cardList.length>0">
			<zHeadLab title='课程会员' size='font-size:28rpx'></zHeadLab>
			<!-- css -->
			<!-- <view class="cardlist-box" v-for="(item,index) in cardList" :key="index"
				:style="{'background': item.cover}">
				<image src="@/static/image/icon/hg-icon.png" class="icon"></image>
				<view class="cardlist-name">{{item.name}}</view>
				<view class="cardlist-title">{{item.title}}</view>
			</view> -->
			<image class="cardlist-box" v-for="(item,index) in cardList" :key="index" :src="item.cover"
				@click="getBannerItem(item,index)">
			</image>
			<view class="gap"></view>
		</block>

	</view>

</template>

<script>
	import zHeadLab from '@/components/z-head-lab.vue'
	export default {
		props: ['cardList', 'isCard','isCrown'],
		components: {
			zHeadLab
		},
		name: "z-menu-list",
		data() {
			return {

			};
		},
		created() {
			console.log('this', this.isCard)
		},
		onLoad() {
			console.log('this', this.isCard)
		},
		methods: {
			getopen(type) {
				this.$emit('getopen',type)
			},
			// banner跳转
			getBannerItem(item, index) {
				uni.navigateTo({
					url: item.url
				})
			}
		}

	}
</script>

<style lang="scss">
	// 菜单
	.menu-box {
		width: 100%;
		padding-top: 30rpx;
		// margin-top: 32rpx;
		// border-radius: 20rpx 20rpx 0rpx 0rpx;
		background: rgba(255, 255, 255, 1);

		.grad-box {
			width: 694rpx;
			// height: 160rpx;
			margin: 0 auto;
			border-radius: 14rpx;

			.grad-list {
				text-align: center;
				margin-bottom: 6rpx;

				.icon {
					width: 97rpx;
					object-fit: cover;
					height: 97rpx;
					margin-top: 26rpx;
				}

				.grid-text {
					font-size: 24rpx;
					color: #ccc;
					margin-top: 10rpx;
				}
			}



		}


	}

	.cardlist-box {
		width: 702rpx;
		height: 96rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		align-content: center;
		border-radius: 16rpx 16rpx 0px 0px;
		margin-top: 34rpx;

		.icon {
			width: 64rpx;
			height: 64rpx;
			margin: 0 12rpx 0 24rpx;
		}

		.cardlist-name {
			font-size: 32rpx;
			font-weight: 400;
			letter-spacing: 0px;
			color: rgba(51, 51, 51, 1);
			text-align: center;
		}

		.cardlist-title {
			font-size: 24rpx;
			font-weight: 400;
			margin-left: 66rpx;
			letter-spacing: 0px;
			color: rgba(51, 51, 51, 1);
			text-align: center;
		}

	}

	// 间隔
	.gap {
		width: 100%;
		height: 20rpx;
	}
</style>